<template>
  <div class="container" style=" margin-top:8%;">
    <div class="panel">
      <div class="text-center">
        <h2 class="padding-top"> <strong>404错误！抱歉您要找的页面不存在</strong> </h2>
        <div class="padding-big">
          <input type="button" value="返回首页" class="btn-color btn-color-2" @click="$router.push('/')">
          <input type="button" class="btn-color btn-color-1" value="保证不打死管理员" @click="$router.push('/')">
        </div>
      </div>
    </div>
    <div class="animate-box">
      <div class="float-left">
        <img src="static/404.gif">
        <div class="alert">卧槽！页面不见了！</div>
      </div>
      <div class="float-right">
        <img src="static/404.png" width="260">
      </div>
    </div>
  </div>
</template>

<style lang="stylus" scoped>
  .btn-color
    color #fff
    padding 8px
    border 1px solid #eee
    border-radius 4px
  .btn-color-1
    background-color #259688
  .btn-color-2
    background-color #F85523
  .btn-color-1:hover, .btn-color-2:hover
    opacity .8

  .container
    margin 0 auto
    padding 0 10px

  @media (min-width: 760px)
    .container
      width 750px

  @media (min-width: 1000px)
    .container
      width 1000px

  @media (min-width: 1200px)
    .container
      width 1200px

  .panel
    border solid 1px #ddd
    border-radius 4px

  .text-center
    text-align center
    padding 16px

  .padding-top
    padding-top 10px

  .padding-big
    padding 20px

  .animate-box
    margin-top -70px
  .float-left
    float left
  .float-right
    float right

  .alert
    border-radius 5px
    padding 15px
    border solid 1px #ddd
    background-color #f5f5f5
</style>
